import { useEffect, useRef, useState } from 'react';
import { Input, Button, Popconfirm, Space, message } from 'antd';
import { ProTable, ProColumns } from '@ant-design/pro-components';
import { userListApi, zhimaListApi } from '@/api';
import { arrayToEnum, isLocal, isSuccess } from '@/utils';
import dayjs from 'dayjs';
import AddStaff from './AddStaff';
import EidtPasswrod from './EidtPasswrod';
import RechargeModal from './RechargeModal';
import RechargeListModal from './RechargeListModal';

export default function Staff() {
  const tableRef: any = useRef('');
  const [open, setOpen] = useState(false);
  const [formData, setFormData] = useState({});
  const [zhimaList, setZhimaList] = useState<any>({});
  const [openPasswrod, setOpenPasswrod] = useState(false);
  const [openRecharge, setOpenRecharge] = useState(false);
  const [openRechargeList, setOpenRechargeList] = useState(false);

  useEffect(() => {
    getZhimaList();
  }, []);

  // 打开弹框
  function openModal(data: any = {}) {
    setOpen(true);
    setFormData(data);
  }

  // 请求
  const request = async (params: any) => {
    params.pageNum = params.current;
    console.log('params: ', params);
    const res: any = await userListApi(params);
    console.log('res: 员工', res?.data?.list);
    if (!isSuccess(res)) return { data: [], total: 0 };
    return { data: res?.data?.list, total: res?.data?.total, success: true };
  };

  const columns: ProColumns[] = [
    {
      title: 'id',
      dataIndex: 'id',
      hideInTable: !isLocal(),
      hideInSearch: true,
    },
    {
      title: '用户名',
      dataIndex: 'name',
      hideInSearch: true,
    },
    {
      title: '交易方向',
      dataIndex: 'direction',
      hideInSearch: true,
      render: (text: any) => (
        <div className={` ${text > 0 ? 'color-green' : 'color-red'}`}>
          {text > 0 ? '正向' : '反向'}
        </div>
      ),
    },
    {
      title: '关联芝麻',
      dataIndex: 'zhiMaId',
      hideInSearch: true,
      render: (text: any, record: any) => <>{record?.zhima?.name || '-'}</>,
    },
    {
      title: '账户余额',
      hideInSearch: true,
      dataIndex: 'balance',
    },
    {
      title: '芝麻盈亏(今日之前)',
      dataIndex: 'yingKui',
      hideInSearch: true,
    },
    {
      title: '同步时间',
      dataIndex: 'tongBuTime',
      hideInSearch: true,
    },
    {
      title: '状态',
      dataIndex: 'is_active',
      valueType: 'select',
      valueEnum: { 1: '启用', 0: '停用' },
      initialValue: '1',
      render: (text: any, record: any) => (
        <div className={` ${record?.is_active ? 'color-green' : 'color-red'}`}>
          {record?.is_active ? '启用' : '停用'}
        </div>
      ),
    },
    {
      title: '创建时间',
      dataIndex: 'create_time',
      hideInSearch: true,
      render: (text: any) => dayjs(text).format('YYYY-MM-DD HH:mm:ss'),
    },
    {
      title: '修改时间',
      dataIndex: 'update_time',
      hideInSearch: true,
      render: (text: any) => dayjs(text).format('YYYY-MM-DD HH:mm:ss'),
    },
    {
      title: '充值明细',
      dataIndex: 'balance',
      hideInSearch: true,
      render: (text: any, record: any) => (
        <Button type="link" size="small" onClick={() => openRechargeListModal(record)}>
          详细
        </Button>
      ),
    },
    {
      title: '操作',
      dataIndex: 'option',
      hideInSearch: true,
      width: 190,
      fixed: 'right',
      render: (_: any, record: any) => [
        <div key="opt" style={{ marginLeft: -8 }}>
          <Button type="link" size="small" onClick={() => openModal(record)}>
            编辑
          </Button>
          <Button type="link" size="small" onClick={() => openPasswrodModal(record)}>
            修改密码
          </Button>
          <Button type="link" size="small" onClick={() => openRechargeModal(record)}>
            充值
          </Button>
        </div>,
      ],
    },
  ];

  // 打开密码弹框
  function openPasswrodModal(data: any = {}) {
    setOpenPasswrod(true);
    setFormData(data);
  }

  // 打开充值弹框
  function openRechargeModal(data: any = {}) {
    setOpenRecharge(true);
    setFormData(data);
  }

  // 打开充值列表
  function openRechargeListModal(data: any = {}) {
    setOpenRechargeList(true);
    setFormData(data);
  }

  // 芝麻列表
  const getZhimaList = async () => {
    const res: any = await zhimaListApi({ current: 1, pageSize: 5000 });
    console.log('res:芝麻列表 ', res);
    if (!isSuccess(res)) return;
    const arr = res.data.list.map((item: any) => ({ key: item.id, value: item.name }));
    setZhimaList(arrayToEnum(arr));
  };

  return (
    <>
      <ProTable
        headerTitle="员工列表"
        rowKey="id"
        columns={columns}
        request={request}
        actionRef={tableRef}
        // search={false}
        options={false}
        scroll={{ x: 1300 }}
        toolBarRender={() => [<Button onClick={() => openModal({})}>新增员工</Button>]}
      />
      {open && (
        <AddStaff
          open={open}
          setOpen={setOpen}
          formData={formData}
          reload={tableRef?.current?.reload}
          zhimaList={zhimaList}
        />
      )}
      {openPasswrod && (
        <EidtPasswrod
          open={openPasswrod}
          setOpen={setOpenPasswrod}
          formData={formData}
          reload={tableRef?.current?.reload}
        />
      )}

      {openRecharge && (
        <RechargeModal open={openRecharge} setOpen={setOpenRecharge} formData={formData} />
      )}

      {openRechargeList && (
        <RechargeListModal
          open={openRechargeList}
          setOpen={setOpenRechargeList}
          formData={formData}
        />
      )}
    </>
  );
}

// export const rechargeListApi = (params = {}) => get('/api/recharge/list', params); // 充值列表
